<!--
 * @Author: ReinerLau lk850593913@gmail.com
 * @Date: 2022-09-13 16:23:27
 * @LastEditors: ReinerLau lk850593913@gmail.com
 * @LastEditTime: 2023-02-15 09:19:29
 * @FilePath: \robot\src\views\patroling\PatrolingCarSwitch.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <PatrolingList
    data-test="patroling-car-switch"
    :list="carList"
    :columns="columns"
    class="h-full"
  >
    <template #status="{ row }">
      <span v-if="row.status === '1'" class="text-white">在线</span>
      <span v-else class="text-[#F83C20]">离线</span>
    </template>
    <template #action="actionProps">
      <component
        :is="curSelectIcon(actionProps)"
        class="cursor-pointer"
        @click="changeCar(actionProps)"
      ></component>
    </template>
  </PatrolingList>
</template>
<script setup lang="ts">
import PatrolingList from "./PatrolingList.vue";
import RadioN from "@/icons/patroling/radio_n.svg";
import RadioS from "@/icons/patroling/radio_s.svg";
import {
  computed,
  ref,
  onBeforeUnmount,
  onDeactivated,
  onActivated,
} from "vue";
import {
  findByRobotTypeAndCompany,
  getChoosePatroling,
} from "@/api/robot-archives.js";
import { getCarInfo } from "@/api/robot-vehicle-log.js";
import usePatrolingStore from "@/store/patroling";

const patrolingStore = usePatrolingStore();
const caritem = computed(() => {
  return patrolingStore.patrolingInfo.robotid;
});

// 车辆列表
const carList = ref([]);

// 栏位
const columns = ref([
  {
    title: "机器人编号",
    prop: "id",
  },
  {
    title: "名称",
    prop: "name",
  },
  {
    title: "机器人类型",
    prop: "type",
  },
  {
    title: "状态",
    prop: "status",
    formatter: true,
  },
  {
    prop: "action",
    title: "操作",
    formatter: true,
  },
]);

/**
 * @description: 当前勾选车辆
 * @param {*} row
 * @return {*}
 */
function curSelectIcon({ row }) {
  const { code } = row;
  return caritem.value === code ? RadioS : RadioN;
}

/**
 * @description: 切换车辆
 * @param {*} row
 * @return {*}
 */
function changeCar({ row }) {
  clearTimeout(st);
  const { code } = row;
  if (caritem.value === code) return;
  getChoosePatroling(code);
  savePatrolingInfo(code);
}

let syncCarStatusSt;
/**
 * @description: 获取车辆列表
 * @return {*}
 */
async function getList() {
  clearTimeout(syncCarStatusSt);
  const { data } = await findByRobotTypeAndCompany("patroling");
  carList.value = data || [];
  syncCarStatusSt = setTimeout(getList, 1000);
}

getList();

let st = null;
/**
 * @description: 保存到store中方便其他组件使用
 * @param {*} code 机器人Id
 * @return {*}
 */
async function savePatrolingInfo(code) {
  clearTimeout(st);
  const { data } = await getCarInfo(code);
  patrolingStore.updatePatrolingInfo(data);
  st = setTimeout(() => savePatrolingInfo(caritem.value), 1000);
}

onBeforeUnmount(() => {
  patrolingStore.updatePatrolingInfo({});
  clearTimeout(st);
});

onActivated(() => {
  getList();
});

onDeactivated(() => {
  clearTimeout(syncCarStatusSt);
});
</script>
